<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  export default {
    data() {
      return {

        list:{},

        charts: '',
        tableList: [],
        xAngleList: [],
        yList: [],
        xyList: [],
        timerList: [],
        // 监测点名称
        monitorName: '',
        pieData: [],
        legendData: [],
      }
    },
    computed: {
      options() {
        var that = this
        const Echarts = require('echarts')
        return {
          animationDuration: 2000, // 动画时长 可以接受 回调函数
          title: {
            text: this.monitorName + '所占比例饼状图',
            x: 'center',
            top: 20
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              var contentArr = []
              contentArr.push('<p style="font-size: 20px">' + params.marker+params.data.name +'：' + params.data.value+ '</p>')
              return contentArr.join('<br/>')
            }
          },
          legend: {
            padding: [40, 5, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            top: 10,
            right: 10,
            data: this.legendData
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '60%'],
              selectedMode: 'single',
              data: this.pieData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 1.5)'
                }
              }
            }
          ]
        }
      }
    },

    methods: {
      changeDate(name) {
        let list = {}
        this.tableList.map(x => {
          if (x.name === name) {
            list = x
          }
        })
       this.list=list
      },
      initEcharts() {
        if (this.charts) {
          this.charts.dispose()
          this.charts = undefined
        }
        const Echarts = require('echarts')
        this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
        var _this = this
        if ( _this.monitorName === '配置文件'){
          this.charts.on("click", function (value) {
            _this.$emit('changeDatePzwj',value)
          })
        }else {
          this.charts.on("click", function (value) {
            _this.$emit('changeDateSqgs',value)
          })
        }



        this.charts.on('mouseout', params => {
          // 关闭tip提示
          // this.charts.dispatchAction({type: 'hideTip'})
        })
        this.$nextTick(() => {
          this.charts.showLoading({
            text: '久感科技为你服务', //显示的文本
            color: '#c23531', //显示转圈的圆圈颜色
            textCloor: '#000', //显示文本的颜色
            maskColor: 'rgba(255,255,255,0.8)', //显示的背景色
            // 字体大小。从 `v4.8.0` 开始支持。
            fontSize: 32,
            // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
            showSpinner: true,
            // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
            spinnerRadius: 14,
            // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
            lineWidth: 5,
            // 字体粗细。从 `v5.0.1` 开始支持。
            fontWeight: 'normal',
            // 字体风格。从 `v5.0.1` 开始支持。
            fontStyle: 'normal',
            // 字体系列。从 `v5.0.1` 开始支持。
            fontFamily: 'sans-serif'
          })

        })
      },
      updateEchart(data) {
        this.legendData = []
        this.pieData = []
        this.monitorName = data.name
        this.tableList=data.itemList
        data.itemList.map((x, index) => {
          this.legendData.push(x.name)
          this.pieData.push({
            value: x.num,
            name: x.name,

          },)
        })
        // this.xAngleList = data.relativeValue
        // this.firstDataTime = monitorInfo.firstDataTime
        // this.collectionTime = monitorInfo.collectionTime
        this.initEcharts()
        this.charts.setOption(this.options)
        this.$nextTick(() => {
          this.charts.hideLoading()
        })

        this.charts.resize()
      },
    },
  }
</script>
<style>
  .formaterUl li{
margin-bottom: 5px;
  }
</style>
